<template>
    <el-row class="smallselectBox">
        <el-col :xs="6" :sm="4" :md="6" v-for="hs in headsort" :key="hs.fid">
            <router-link :to="{name: 'Foodlist', params: {sortId: hs.fid}}">
                <img class="fitImg" :src="hs.image">
                <p>{{hs.name}}</p>
            </router-link>
        </el-col>
    </el-row>
</template>

<script>

import axios from 'axios'

export default {
  data () {
    //选项 / 数据
    return {
      headsort: []
    }
  },
  methods: {
    //事件处理器
  },
  components: {
    //定义组件
  },
  async created () {
    //生命周期函数
    //热门分类
     var url = '/api/consumer-index/index_consumer/getHotFoodForIndex'
    axios.get(url).then(res =>{
      this.headsort = res.data
      console.log(this.headsort)
    })
  }
}
</script>

<style>
.smallselectBox a {
  display: block;
}
.smallselectBox img {
  background: #fff;
  height: 100px;
}
.smallselectBox {
  background: #f4f0ec;
  padding: 10px;
  box-sizing: border-box;
}
.smallselectBox .el-col {
  /*margin:10px 0;*/
  padding: 10px;
}
.smallselectBox p {
  text-align: center;
}
</style>
